<template>
  <div class="index-page">
    <!-- carousel轮播图 -->
   <section class="carouse">
      <Carousel v-model="carousel" loop :autoplaySpeed="4000" autoplay>
          <CarouselItem v-for="(item, i) in list" :key="list.id">
              <div class="demo-carousel">
                <img class="demo-img" :src="item.url">
              </div>
          </CarouselItem>
          
      </Carousel>
   </section>
  
  <!-- section-1 -->
  <section class="section-1">
    <div class="section-title f24">云视频服务 让距离产生美</div>
    <div class="section-subtitle mt10 mb40 c3">CLOUD VIDEO SERVICES MAKE DISTANCE BEAUTIFUl</div>
    <div class="hd">
    <Row>
      <Col span="8">
        <img src="../assets/images/index/云课堂.png" alt="">
        <p class="mt10">云课堂</p>
      </Col>
      <Col span="8">
        <img src="../assets/images/index/云培训.png" alt="">
        <p class="mt10">云培训</p>
      </Col>
      <Col span="8">
        <img src="../assets/images/index/智能终端.png" alt="">
        <p class="mt10">智能终端</p>
      </Col>
    </Row>
    </div>
  </section>

  <!-- section-2 -->
  <section class="section-2">
    <div class="section-title f24">8项强大功能</div>
    <div class="section-subtitle mt10 mb40 c3 letter-space">POWERFUL FUNCTION</div>
    <div class="hd">
    <Row>
      <Col span="6">
        <img src="../assets/images/index/8-1互动.png" alt="">
        <p class="">互动</p>
      </Col>
      <Col span="6">
        <img src="../assets/images/index/8-2直播.png" alt="">
        <p class="">直播</p>
      </Col>
      <Col span="6">
        <img src="../assets/images/index/8-3录播.png" alt="">
        <p class="">录播</p>
      </Col>
      <Col span="6">
        <img src="../assets/images/index/8-4会议.png" alt="">
        <p class="">会议</p>
      </Col>
    </Row>
    <Row class="mt20 hd">
        <Col span="6">
        <img src="../assets/images/index/8-5资源管理.png" alt="">
        <p class="">资源管理</p>
      </Col>
      <Col span="6">
        <img src="../assets/images/index/8-6在线学习.png" alt="">
        <p class="">在线学习</p>
      </Col>
      <Col span="6">
        <img src="../assets/images/index/8-7在线测评.png" alt="">
        <p class="">在线评测</p>
      </Col>
      <Col span="6">
        <img src="../assets/images/index/8-8大数据分析.png" alt="">
        <p class="">大数据分析</p>
      </Col>
    </Row>
    </div>
  </section>


  <!-- section-3 -->
  <section class="section-3">
    <div class="section-title f24">SDK接口 快速实现互动直播</div>
    <div class="section-subtitle mt10 mb40 c3">
      FAST IMPLEMENTATION OF INTERACTIVE LIVE BROADCASTING WITH SDK INTERFACE
    </div>
    <ul class="hd list">
      <li class="voice">
        <div class="li-title f24">语音通话</div>
        <div class="li-desc mt10">
          <p>支持1对1、多对多实时语音通话</p>
          <p class="mt10">用于语音聊天室，语音社交等互动场景</p>
        </div>
      </li>
      <li class="video">
        <div class="li-title f24">视频通话</div>
        <div class="li-desc mt10">
          <p>支持1对1、多对多实时视频通话</p>
          <p class="mt10">用于视频社交、互动课堂等互动场景</p>
        </div>
      </li>
      <li class="hudong">
        <div class="li-title f24">互动直播</div>
        <div class="li-desc mt20">
          <p class="mt10">主播间、观众和主播实时音视频连麦互动</p>
          <p class="mt10">最大可支持17人视频连麦，百万人大频道互动</p>
        </div>
      </li>
    </ul>
  </section>

  <!-- section-4 -->
  <section class="section-4">
    <div class="section-title f24 text-center">免费试用体验</div>
    <div class="section-subtitle text-center mt10 mb40 c3 letter-space">
      FREE TRIAL EXPERIENCE
    </div>
    <div class="hd">
      <Row>
        <Col span="8">
          <div class="img-wrapper"><img src="../assets/images/index/免费试用1.png" /></div>
          <div class="mt10 clearfix text-wrapper">
            <span>云培训通用版</span>
            <span class="fr arrow">前往体验</span>
          </div>
        </Col>
        <Col span="8">
          <div class="img-wrapper"><img src="../assets/images/index/免费试用2.png" /></div>
          <div class="mt10 clearfix text-wrapper">
            <span>云课堂教育局版</span>
            <span class="fr arrow">前往体验</span>
          </div>
        </Col>
        <Col span="8">
          <div class="img-wrapper"><img src="../assets/images/index/免费试用3.png" /></div>
          <div class="mt10 clearfix text-wrapper">
            <span>云课堂学校版</span>
            <span class="fr arrow">前往体验</span>
          </div>
        </Col>
      </Row>
    </div>
    
  </section>

  <!-- section-5 -->
  <section class="section-5">
     <div class="section-title f24 text-center">AI智能终端</div>
      <div class="section-subtitle text-center mt10 mb40 c3 letter-space">
        INTILLIGENT TERMENAL
      </div>
      <BsScaleCarouse />
  </section>

  <!-- section-6 -->
  <section class="section-6">
    <div class="section-title f24 text-center c2">解决方案</div>
      <div class="section-subtitle text-center mt10 mb40 c3 letter-space">
        SOLUTION
      </div>
      <ul class="solutions">
        <li class="solution-1">
          <div class="wrap-bg"></div>
          <div class="top-wrap">
            <div class="img text-center mb40">
                <img src="../assets/images/index/解决1.png" alt="">
              </div>
              <div class="text f20 text-center mb40">教育机构</div>
              <div class="detail text-center">
                <p>教育机构教育机构</p>
                <p>教育机构教育机构</p>
                <p>教育机构教育机构</p>
                <p class="mt20"><router-link to="/solutions">查看详情</router-link></p>
              </div>
          </div>
        </li>
        <li class="solution-2">
          <div class="wrap-bg"></div>
          <div class="top-wrap">
          <div class="img text-center mb40">
            <img src="../assets/images/index/解决2.png" alt="">
          </div>
          <div class="text f20 text-center mb40">政府企业</div>
          <div class="detail text-center">
            <p>政府企业政府企业</p>
            <p>政府企业政府企业</p>
            <p>政府企业政府企业</p>
            <p class="mt20"><router-link to="/solutions?type=3">查看详情</router-link></p>
          </div>
          </div>
        </li>
        <li class="solution-3">
          <div class="wrap-bg"></div>
          <div class="top-wrap">
          <div class="img text-center mb40">
            <img src="../assets/images/index/解决3.png" alt="">
          </div>
          <div class="text f20 text-center mb40">培训机构</div>
          <div class="detail text-center">
            <p>培训机构培训机构</p>
            <p>培训机构培训机构</p>
            <p>培训机构培训机构</p>
            <p class="mt20"><router-link to="/solutions?type=2">查看详情</router-link></p>
          </div>
          </div>
        </li>
      </ul>
  </section>

  <!-- section-7 -->
  <section class="section-7">
    <div class="section-title f24 text-center">技术支持</div>
    <div class="section-subtitle text-center mt10 mb40 c3 letter-space">
      TECHNICAL SUPPORT
    </div>
    <div class="hd text-center">
      <Row>
        <Col span="6">
          <img src="../assets/images/index/tec1.png" alt="">
          <p class="mt10">电脑客户端</p>
        </Col>
        <Col span="6">
          <img src="../assets/images/index/tec2.png" alt="">
          <p class="mt10">专用教室客户端</p>
        </Col>
        <Col span="6">
          <img src="../assets/images/index/tec3.png" alt="">
          <p class="mt10">APP 安卓端</p>
        </Col>
        <Col span="6">
          <img src="../assets/images/index/tec4.png" alt="">
          <p class="mt10">APP IOS端</p>
        </Col>
      </Row>
    </div>
  </section>

  <!-- section-8 -->
  <section class="section-8">
    <div class="section-title f24 text-center">关于云创</div>
    <div class="section-subtitle text-center mt10 mb40 c3 letter-space">
      ABOUT US
    </div>
    <div class="hd">
      <Row>
        <Col span="12">
          <h2 class="f20">云创有限公司</h2>
          <p class="mt20 mb40" style="line-height:1.5;">
            浙江云创教育科技有限公司（简称云创教育)是一家拥有15年教育行业背景，致力于“中国教育均衡发展”的互联网教育+互联网企业。

   公司专注于音视频底层开发，拥有一批音视频高级人才，为政府企业提供云音视频服务应用。同时提供K12教育应用研发，满足教育局、学校的各种应用场景，以教育均衡化为目的，真正实现让每一堂课成为互联网课堂，线上线下融合教学，让教与学如此方便！为教育均衡化奠定夯实基础。
          </p>
          <div class="contact">
            <router-link to="/about">联系我们</router-link>
          </div>
        </Col>
        <Col span="12 text-right">
          <img src="../assets/images/index/关于我们.png" alt="">
        </Col>
        
      </Row>
    </div>
  </section>
  <!-- back to top  -->
  <BackTop></BackTop>
</div>
</template>

<script>
import BsScaleCarouse from '@/components/BsScaleCarouse'

export default {
  components:{BsScaleCarouse},
  data () {
    return {
      carousel: 0,
      list: []
    }
  },
  mounted() {
    this.getBanners()
  },
  methods:{
    getBanners() {
      this.$getJson(this.$API.indexAd).then(res => {
        if (res.data && res.data.length > 0) {
          this.list = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.carouse{
  height: 400px;
  overflow: hidden;
}
.demo-carousel {
  background: #c7e3fc;
  background-size: cover;
}
.demo-img{
  width: 100%;
  height: 400px;
}
.section-1{
  padding: 75px 0 55px;
  text-align: center;
}
.letter-space{
  letter-spacing: 10px;
}
.section-2{
  padding: 60px 0;
  text-align: center;
  background: #ebeced;
  img{
    width: 120px;
    transition: transform 0.5s;
    &:hover{
      transform: translateY(-10px) scale(1.1);
    }
  }
}

.section-3{
  background: #333435;
  text-align: center;
  padding: 40px 0 0;
  .section-title{
    color: #fff;
  }
  .list{
    overflow: hidden;
    li{
      width: 33.33%;
      color: #fff;
      float: left;
      height: 226px;
      transition: transform 0.5s;
      padding:80px 20px 20px;
      text-align: left;
      
      &.voice{
        background: #b3cbed url(../assets/images/index/sdk1电话.png) no-repeat 90% 10%;
      }
      &.video{
        background: #90b7ee url(../assets/images/index/sdk2视频.png) no-repeat 90% 10%;
      }
      &.hudong{
        background: #508fed url(../assets/images/index/sdk3互动直播.png) no-repeat 90% 10%;
      }
      &:hover{
        transform: scale(1.1);
      }
    }
  }
}

.section-4{
  padding: 60px 0;
  .img-wrapper, .text-wrapper{
    width: 300px;
    margin: auto;
    img{width: 100%;}
  }
  .arrow{
    display: inline-block;
    padding: 2px 4px;
    color: #f60;
    border: 1px solid #f60;
    border-radius: 4px;
    font-size: 12px;
  }
}

.section-5{
  padding: 60px 0;
  color: #fff;
  background: #000 url(../assets/images/index/AI终端背景.png) no-repeat center center;
}

.section-6{
  padding: 60px 0;
  color: #fff;
  background: #fff;
  .solutions{
    overflow: hidden;
    width: 1200px;
    margin:40px auto;
    li{
      width: 400px;
      height: 700px;
      float: left;
      padding: 60px;
      position: relative;
      .detail {
        display: none;
        line-height: 2;
        a {
          display: inline-block;
          padding: 0 40px;
          border:1px solid #fff;
          color: #fff;
          border-radius: 20px;
        }
      }
      &:hover{
        .wrap-bg {
          height: 700px;
        }
        .top-wrap{
          padding-top: 60px;
        }
        .detail{
          display: block;
        }
      }
      .wrap-bg{
        width: 400px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(80, 142, 240, 0.6);
        transition: height 0.6s;
        z-index: 0;
      }
      .top-wrap{
        position: absolute;
        width: 400px;
        height: 700px;
        top: 0;
        left: 0;
        z-index: 3;
        padding: 200px 60px 0;
        transition: all 0.5s;
      }
      &.solution-1{
        background: url(../assets/images/index/solu1.png);
      }
      &.solution-2{
        background: url(../assets/images/index/solu2.png);
      }
      &.solution-3{
        background: url(../assets/images/index/solu3.png);
      }
      
    }
  }
}

.section-7 {
  background: url(../assets/images/index/技术bg.png) no-repeat center center;
  padding: 60px 0;
  color:#fff;
}

.section-8{
  padding: 60px 0;
  .contact{
    a{
      display: inline-block;
      background: #fcc066;
      color: #fff;
      padding: 10px 30px;
    }
  }
}
</style>
